import { defineStore } from "pinia";
import { useStorage } from "@vueuse/core";

// setup
export const useAppStore = defineStore("app", () => {
  // state
  const device = useStorage("device", "desktop");

  const sidebarStatus = useStorage("sidebarStatus", "closed");

  const sidebar = reactive({
    opened: sidebarStatus.value !== "closed",
    withoutAnimation: false,
  });
  const activeTopMenu = useStorage("activeTop", "");

  // actions
  function toggleSidebar() {
    sidebar.opened = !sidebar.opened;
    sidebar.withoutAnimation = false;
    if (sidebar.opened) {
      sidebarStatus.value = "opened";
    } else {
      sidebarStatus.value = "closed";
    }
  }

  function closeSideBar(withoutAnimation: boolean) {
    sidebar.opened = false;
    sidebar.withoutAnimation = withoutAnimation;
    sidebarStatus.value = "closed";
  }

  function openSideBar(withoutAnimation: boolean) {
    sidebar.opened = true;
    sidebar.withoutAnimation = withoutAnimation;
    sidebarStatus.value = "opened";
  }

  function toggleDevice(val: string) {
    device.value = val;
  }

  function changeTopActive(val: string) {
    activeTopMenu.value = val;
  }
  return {
    device,
    sidebar,
    activeTopMenu,
    toggleDevice,
    toggleSidebar,
    closeSideBar,
    openSideBar,
    changeTopActive,
  };
});
